<template>
  <SubTitle>
        <template #subtitle>监控预览</template>
      </SubTitle>
  <div class="monitor" ref="monitor">
    <div>
        <img src="../../assets/img/th.jpg" alt="" class="monitorimg">
        <h4>1号地</h4>
    </div>
    <div>
        <img src="../../assets/img/th2.jpg" alt="" class="monitorimg">
        <h4>员工区</h4>
    </div>
  </div>
</template>

<script>
import SubTitle from './SubTitle.vue';
export default {
    components:{
        SubTitle
    }

}
</script>

<style lang="less" scoped>
.monitor{
    margin-top: 1rem;
    width: 100%;
    height: 290px;
    display: flex;
    justify-content: space-between;
    div{
        width: 47%;
        .monitorimg{
    width: 100%;
    height: 60%;
}
h4{
    margin-top: 3rem;
    text-align: center;
    color: skyblue;
    font-size: 20px;
}
    }
}
@media screen and (max-width: 720px) {
}

</style>